<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"
          type="text/css">
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #l-map {
            height: 100%;
            width: 78%;
            float: left;
            border-right: 2px solid #bcbcbc;
        }

        #r-result {
            height: 100%;
            width: 20%;
            float: left;
        }

        .BMapLabel {
            max-width: none;
        }

        .btn {
            width: 6rem;
            margin: 0 1rem 0 4.5rem;
        }

    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/getscript?v=2.0&ak=F19q5OcuWjjkMN55MFhqBU1h3GFfW0S3"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <title>百度地图Demo</title>
</head>
<body>
<div id="allmap"></div>
<div class="input-card" style='width: 18rem;'>
    <div class="input-item">
        <label><input type="radio" name='func' value='rule'><span class="input-text">距离测量</span></label>
        <label><input type="radio" name='func' value='measureArea'><span class="input-text">面积测量</span></label>
    </div>
    <div class="input-item">
        <input id="close" type="button" class="btn" value="关闭"/>
    </div>
</div>
</body>
</html>
<script type="text/javascript">

    // 蓝色中心点
    var CENTER_BLUE = [113.323803, 23.134805]

    // 红色人群
    var PEOPLE_RED = "113.327827334,23.134173539668|113.32868853198,23.134174377966|113.32913672194,23.133766765726|"






















    var myMap = {
        map: null,
        drawingManager: Object,
        drawOverlays: [],
        openInfoWindow: Object,
        CENTER_ICON: new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
//        offset: new BMap.Size(10, 25),
            imageOffset: new BMap.Size(0, 0 - 10 * 25)
        }),
        mapLoad: function () {
            // 百度地图API功能
            this.map = new BMap.Map("allmap", {enableMapClick: false});

            // 左上角，添加比例尺
            var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
            this.map.addControl(top_left_control);

            //左上角，添加默认缩放平移控件
            var top_left_navigation = new BMap.NavigationControl();
            this.map.addControl(top_left_navigation);

            var centerPoint = new BMap.Point(CENTER_BLUE[0], CENTER_BLUE[1]);
            this.map.centerAndZoom(centerPoint, 15);
            this.map.disableDoubleClickZoom();
            this.map.enableScrollWheelZoom();
            this.addMarker(centerPoint, "center")
            this.addPeople()
        },
        addMarker: function (point, type) {
            var marker = new BMap.Marker(point);
            var title = "人群";
            if (type == "center") {
                marker = new BMap.Marker(point, {icon: myMap.CENTER_ICON});
                title = "基站";
            }
            this.map.addOverlay(marker);

            marker.addEventListener("mouseover", function (e) {
                        myMap.infoWindow = new BMap.InfoWindow(myMap.getMsgContent(e.point, title), myMap.getMsgOptions());
                        myMap.map.openInfoWindow(myMap.infoWindow, e.point);
                    }
            );

            marker.addEventListener("mouseout", function () {
                        myMap.map.closeInfoWindow();
                    }
            );
        },
        addPeople: function () {
            var myArray = new Array();
            var pepleArray = PEOPLE_RED.split("|")
            for (var i = 0; i < pepleArray.length; i++) {
                if (pepleArray[i]) {
                    var lonLat = pepleArray[i].split(",")
                    myArray.push(new BMap.Point(lonLat[0], lonLat[1]));
                }
            }

            //海量点
            var options = {
                size: BMAP_POINT_SIZE_BIGGER,
                shape: BMAP_POINT_SHAPE_CIRCLE,
                color: 'red'
            }
            var pointCollection = new BMap.PointCollection(myArray, options);

            pointCollection.addEventListener('mouseover', function (e) {
                myMap.infoWindow = new BMap.InfoWindow(myMap.getMsgContent(e.point, "人群"), myMap.getMsgOptions());
                myMap.map.openInfoWindow(myMap.infoWindow, e.point);
            });

            pointCollection.addEventListener('mouseout', function (e) {
                myMap.map.closeInfoWindow();
            });

            this.map.addOverlay(pointCollection);
        },
        drawingManagerF: function () {
            this.drawingManager = new BMapLib.DrawingManager(this.map, {
                isOpen: false, //是否开启绘制模式
                enableDrawingTool: false, //是否显示工具栏
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(5, 5), //偏离值
                },
                circleOptions: this.getStyle(), //圆的样式
                polylineOptions: this.getStyle(), //线的样式
                polygonOptions: this.getStyle(), //多边形的样式
                rectangleOptions: this.getStyle() //矩形的样式
            });
            this.drawingManager.enableCalculate()
            var overlaycomplete = function (e) {
                myMap.drawOverlays.push(e.overlay);
                var radios = document.getElementsByName('func');
                for (var i = 0; i < radios.length; i += 1) {
                    radios[i].checked = false;
                }
            };

            this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)
            //添加鼠标绘制工具监听事件，用于获取绘制结果
            this.drawingManager.addEventListener('overlaycomplete', overlaycomplete);
        },
        clearAllOverlays: function () {
            var allOverlay = this.map.getOverlays();

            for (var i = 0; i < allOverlay.length; i++) {
                var lableOverlay = allOverlay[i];
                if (lableOverlay.toString() == "[object Label]") {
                    this.map.removeOverlay(lableOverlay);
                }
            }

            for (var i = 0; i < this.drawOverlays.length; i++) {
                this.map.removeOverlay(this.drawOverlays[i]);
            }
            this.drawOverlays.length = 0
        },
        getMsgOptions: function () {
            return {
                width: 160,
                height: 80,
                title: '<b style="color: #82B1D9">百度地图</b><br>',
                enableMessage: false
            }
        },
        getMsgContent: function (point, title) {
            return '<div>' +
                    '<b>' + title + '</b><br>' +
                    '<p style="margin:0;line-height:1;font-size:13px">' +
                    '<br/>坐标：' + point.lng + ',' + point.lat +
                    '</p>' +
                    '</div>';
        },
        getStyle: function () {
            return {
                strokeColor: "blue",    //边线颜色。
                fillColor: "blue",      //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 2,       //边线的宽度，以像素为单位。
                strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
                fillOpacity: 0.2,      //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
            }
        }
    }


    var radios = document.getElementsByName('func');
    for (var i = 0; i < radios.length; i += 1) {
        radios[i].onchange = function (e) {
            var value = e.target.value;
            myMap.drawingManager.open();
            if (value == "rule") {
                myMap.drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)
            } else {
                myMap.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)
            }
        }
    }

    document.getElementById('close').onclick = function () {
        myMap.clearAllOverlays()
        myMap.drawingManager.close();
        for (var i = 0; i < radios.length; i += 1) {
            radios[i].checked = false;
        }
    }

    myMap.mapLoad()
    myMap.drawingManagerF()
</script>
